<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs 示例</title>
		<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
		<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
		<script type="text/javascript" src="../../ichart.1.1.min.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
		<script type="text/javascript">
		$(function(){
			var flow=[];
			for(var i=0;i<25;i++){
				flow.push(Math.floor(Math.random()*(10+((i%16)*5)))+10);
			}
			
			var data = [
			         	{
			         		name : 'PV',
			         		value:flow,
			         		color:'#ec4646',
			         		line_width:4
			         	}
			         ];
	        
			var labels = ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"];
			
			var chart = new iChart.LineBasic2D({
				render : 'canvasDiv',
				data: data,
				align:'center',
				title : {
					text:'ichartjs官方网站上一日PV流量',
					font : '微软雅黑',
					height:60,
					fontsize:44,
					color:'#e4e4e4'
				},
				subtitle : {
					text:'14:00-16:00访问量达到最大值',
					font : '微软雅黑',
					height:30,
					fontsize:36,
					color:'#e4e4e4'
				},
				footnote : {
					text:'ichartjs.com',
					font : '微软雅黑',
					fontsize:24,
					height:30,
					fontweight:600,
					padding:'0 40',
					color:'#e4e4e4'
				},
				width : 800,
				height : 400,
				fit:true,
				shadow:true,
				shadow_color : '#202020',
				shadow_blur : 8,
				shadow_offsetx : 0,
				shadow_offsety : 0,
				background_color:'#353c5a',
				tip:{
					enable:true,
					shadow:true,
					listeners:{
						 //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
						parseText:function(tip,name,value,text,i){
							return "<span style='color:#005268;font-size:24px;font-weight:600;'>"+labels[i]+":00访问量约:<br/>"+
							"</span><span style='color:#005268;font-size:34px;font-weight:600;'>"+value+"万</span>";
						}
					}
				},
				crosshair:{
					enable:true,
					line_color:'#ec4646',
					line_width:3
				},
				sub_option : {
					smooth : true,
					label:false,
					hollow:false,
					hollow_inside:false,
					point_size:14
				},
				coordinate:{
					background_color:'#2f85a2',
					width:'78%',
					height:'74%',
					striped_factor : 0.14,
					grid_color:'#4e4e4e',
					axis:{
						color:'#252525',
						width:[0,0,4,4]
					},
					scale:[{
						 position:'left',	
						 start_scale:0,
						 end_scale:100,
						 scale_space:10,
						 scale_size:2,
						 scale_enable : false,
						 label : {color:'#e4e4e4',font : '微软雅黑',fontsize:26,fontweight:600},
						 scale_color:'#9f9f9f'
					},{
						 position:'bottom',	
						 label : {color:'#e4e4e4',font : '微软雅黑',fontsize:26,fontweight:600},
						 scale_enable : false,
						 labels:labels
					}]
				}
			});
			//利用自定义组件构造左侧说明文本
			chart.plugin(new iChart.Custom({
					drawFn:function(){
						//计算位置
						var coo = chart.getCoordinate(),
							x = coo.get('originx'),
							y = coo.get('originy'),
							w = coo.get('width'),
							h = coo.get('height');
						//在左上侧的位置，渲染一个单位的文字
						chart.target.textAlign('start')
						.textBaseline('bottom')
						.textFont('600 26px 微软雅黑')
						.fillText('访问量(万)',x-90,y-22,false,'#e4e4e4')
						.textBaseline('top')
						.fillText('(时间)',x+w+24,y+h+10,false,'#e4e4e4');
						
					}
			}));
		//开始画图
		chart.draw();
	});
	</script>
</head>
<body>
	<div id='canvasDiv'></div>
</body>
</html>

